<template>
	<div class="knowledgeMapRec w944">
		<alert ref="alert"></alert>
		<deleteAlert ref="deleteAlert"></deleteAlert>
		<zongheData ref="zongheData"></zongheData>
		<div class="label_top">
			<p><i class="line"></i>知识地图</p>
			<b class="rightBtn" @click="fenleiButton">分类管理</b>
		</div>
		<div class="label_table">
			<div class="el-tabs-report">
				<a class="listTwo advise" @click="createWare">创建课件</a>
				<a class="listOne" style="width: 10%;margin-left: 10px;">推荐管理</a>
				<a class="listTwo" @click="importDaoChu">导出数据</a>
				<el-select v-model="permission" @change="getTableList" class="th_2">
					<el-option label="筛选分类" value=""></el-option>
					<el-option v-for="item in permissionArr" :key="item.id" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<div class="msearch">
					<input placeholder="请输入课件、创建者关键词……" v-model="search"/>
					<a @click="getPageSearch"><img src="../../assets/qudaoImg/search.png"/></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="courseName" label="知识地图课件名称"></el-table-column>
				<el-table-column label="创建者" width="120">
					<template slot-scope="scope">
						<span>{{scope.row.nickname}}<i class="cancellation" v-if="scope.row.lecturerStatus==false">（已注销）</i></span>
					</template>
				</el-table-column>
				<el-table-column label="课件组" width="100">
					<template slot-scope="scope">
						<el-button @click="liveCourseware(scope.row)">添加管理</el-button>
					</template>
				</el-table-column>
				<el-table-column label="课件数据" width="100">
					<template slot-scope="scope">
						<el-button @click="handleData(scope.row)">查看详情</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleCancel(scope.row)" class="red">取消推荐</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="handleCancelAll" class="allDelete">批量取消</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	import deleteAlert from '../../components/deleteAlert.vue';
	import zongheData from '../../components/zongheData.vue';
	export default {
		data() {
			return {
				search:'',
				rowId:'',
				updateTitle:'',
				tableData:[],
				permission:'',
				permissionArr:[],
				multipleSelection: [],
		        pagesize: 15,
		        currentpage: 1,
		        total: 1
			}
		},
		methods: {
			getTableList(){
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/quanzi/getQuanzireRecommendKnowledgeMap",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {
						page:this.currentpage,
						num:this.pagesize,
						rootcompanyid:1,
						name:this.search,
						knowledgeMapTypeId:this.permission
					},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
						}
					}
				});
			},
			fenleiButton(){
				this.$router.push({
					name:'topicClassify'
				})
			},
			handleCancel(row){
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/quanzi/cancelQuanzireRecommendKnowledgeMap?ids="+row.id,
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().cancelTuijianResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			handleCancelAll(){
				if(this.multipleSelection.length==0){
					this.$refs.alert.show({
						alertText: '批量选择为空',
						alertSubmit: function() {
							alertStatus: 0
						}
					});
				}else{
					let s=this.multipleSelection.join(',');
					this.$ajax({ 
						url: this.$root.jifuUrl + "/mns/quanzi/cancelQuanzireRecommendKnowledgeMap?ids="+s,
						headers:{'ContentType': 'application/json; charset=utf-8'},
						method: 'POST',
						data:{},
						success: res => {
							if(res.data.code == 200) {
								this.$rootFunction().cancelTuijianResSuccess();
							}else{
								this.failText = res.data.message;
								this.$rootFunction().deleteResFail();
							}
						}
					});
				}
			},
			createWare() {
				this.$router.push({
					path:'/createWare'
				})
			},
			liveCourseware(row){
				this.$router.push({
					name: 'courseware',
					params: {
						liveId:row.id,
						updateTitle:row.courseName,
						pathKey:'knowledgeMapRec'
					}
				})
			},
			handleData(row){
				this.rowId = row.id;
				this.updateTitle = row.courseName
				this.$refs.zongheData.tongjiShow=true;
				this.$refs.zongheData.tongjiAPI();
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				})
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			getPageSearch(){
				this.currentpage=1;
				this.getTableList();
			},
			importDaoChu(){
				
			},
			getTagType(){
				let tagType = 6;
				this.$rootFunction().tagType({tagType});
			},
		},
		components: {
			alert,
			deleteAlert,
			zongheData
		},
		mounted: function() {
			this.getTableList();
			this.getTagType();
		}
	}
</script>

<style>
	.knowledgeMapRec .advise{border: 1px solid #44CEF6;box-sizing: border-box;position: relative;top: 1px;}
</style>